<template>
  <div class="editor-wrapper">
    <!-- 工具栏 -->
    <Toolbar
      id="toolbar-container"
      :editor="editorRef"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <button @click="test">接收代码</button>
    <!-- 编辑器 -->
    <Editor
      id="editor-container"
      v-model="modelValue"
      :default-config="editorConfig"
      :mode="mode"
      @on-change="handleChange"
      @on-created="handleCreated"
    />

    <el-dialog v-model="dialogVisible" title="预览" width="100%" height="100%">
      <div class="content" v-html="modelValue"></div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';

  // API 引用
  // import { uploadFileApi } from '@/api/file';

  const props = defineProps({
    modelValue: {
      type: [String],
      default: '',
    },
  });

  const emit = defineEmits(['update:modelValue']);
  const dialogVisible = ref(false);
  // const modelValue = useVModel(props, 'modelValue', emit);
  const modelValue = ref('');
  const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
  const mode = ref('default'); // 编辑器模式
  const toolbarConfig = ref({}); // 工具条配置
  // 编辑器配置
  const editorConfig = ref({
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        // 自定义图片上传
        async customUpload(file: any, insertFn: any) {
          uploadFileApi(file).then((response) => {
            const url = response.data.url;
            insertFn(url);
          });
        },
      },
    },
  });

  const handleCreated = (editor: any) => {
    editorRef.value = editor; // 记录 editor 实例，重要！
    editor.setHtml(
      '<h1>hello world 嘿嘿<span style="color: rgb(225, 60, 57);"><strong>你好</strong></span></h1>'
    );
  };

  function handleChange(editor: any) {
    modelValue.value = editor.getHtml();
  }

  const test = () => {
    console.log(editorRef.value);
    console.log(modelValue.value._value);
    dialogVisible.value = true;
  };
  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" scoped>
  .editor-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;

    #toolbar-container {
      border-bottom: 1px solid #ccc;
    }

    #editor-container {
      flex-grow: 1;
    }
  }
  ::v-deep.content {
    padding-left: 300px;
    padding-right: 300px;

    div[data-w-e-type='video'] {
      text-align: center;
    }
  }
</style>
